<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>SpringMVC-Spring-JPA</title>

    <link href="<c:url value='/css/bootstrap.min.css'></c:url>" rel="stylesheet">

    <script type="text/javascript" src="<c:url value='/js/jquery.min.js'></c:url>"></script>
    <script type="text/javascript" src="<c:url value='/js/jquery-1.11.3.js'></c:url>"></script>
    <script type="text/javascript" src="<c:url value='/js/bootstrap.min.js'></c:url>"></script>

    <script>

        //初始化列表
        function initResume() {
            $.ajax({
                type: "GET",
                url: "${pageContext.request.contextPath}/resume/findAll",
                dataType: "json",
                success: function (jsonResult) {
                    fillTable(jsonResult);
                }
            });
        }

        function fillTable(jsonResult) {
            var innerHTML = "";
            $("#resumeTableTbody").html(innerHTML);
            for (var i = 0; i < jsonResult.length; i++) {

                var resume = jsonResult[i];
                innerHTML +=
                    "<tr>" +
                    "<td>" + resume.id + "</td>" +
                    "<td>" + resume.name + "</td>" +
                    "<td>" + resume.address + "</td>" +
                    "<td>" + resume.phone + "</td>" +
                    '<td><button type="button btn-primary btn-lg" data-toggle="modal" data-target="#myModalOne" class="btn btn-xs btn-primary" onclick="findDetail(\'' + resume.id + '\')" >更新</button>' +
                    '<button type="button" class="btn btn-xs btn-info" onclick="delectRow(\'' + resume.id + '\')" >删除</button>'
                innerHTML += "</td></tr>";
            }
            $("#resumeTableTbody").html(innerHTML);
        }

        //删除
        function delectRow(id) {
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/resume/delete",
                dataType: "json",
                data: {id: id},
                success: function (data) {
                    window.location.reload();
                },
                error: function (data) {
                    window.location.reload();
                }
            })
        }

        //详情
        function findDetail(id) {
            $.ajax({
                type: "GET",
                url: "${pageContext.request.contextPath}/resume/findById",
                dataType: "json",
                data: {id: id},
                success: function (resume) {
                    var id = resume.id;
                    var name = resume.name;
                    var address = resume.address;
                    var phone = resume.phone;
                    $("#id").val(id);
                    $("#name").val(name);
                    $("#address").val(address);
                    $("#phone").val(phone);
                },
                error: function (data) {
                    window.location.reload();
                }
            })
        }

        //新增或者更新
        function addResume() {
            var addParam = new Object();
            var id = $("#id").val()
            var name = $("#name").val()
            var address = $("#address").val()
            var phone = $("#phone").val()
            if (name != null) {
                addParam.id = id
            }
            if (name != null) {
                addParam.name = name
            }
            if (address != null) {
                addParam.address = address
            }
            if (phone != null) {
                addParam.phone = phone
            }

            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/resume/saveOrUpdate",
                dataType: "json",
                data: addParam,
                success: function (data) {
                    window.location.reload();
                },
                error: function (data) {
                    window.location.reload();
                }
            })
        }
    </script>

    <style>
        div {
            padding: 10px 10px 0 10px;
        }
    </style>
</head>
<body onload="initResume()">
<div>
    <h3 style="text-align:center;">我是服务器：${pageContext.request.localPort}</h3>
    <h3 style="text-align:center;">当前sessionId：${pageContext.session.id}</h3>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-sm-offset-8 col-md-12 col-md-offset-8 main main-header-parent">
            <div class="row" style="margin-top: 0px; margin-left:0px;">
                <form class="form-inline">
                    <div class="form-group">
                        <button type="button" class="btn btn-primary btn-sm"
                                data-toggle="modal" data-target="#myModalOne" id="addResume">新增
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 main"
             style="padding-top: 0px;padding-left: 20px;">
            <label>列表</label>
            <div class="row" style="margin-top: 10px;margin-bottom: 0px">
                <div class="table-responsive">
                    <table class="table table-striped table-hover" style="font-size: 14px;border-radius: 0px;">
                        <thead>
                        <tr>
                            <td>ID</td>
                            <td>姓名</td>
                            <td>地址</td>
                            <td>手机号</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody id="resumeTableTbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<%--添加--%>
<div class="modal fade bs-example-modal-lg" id="myModalOne" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabelOne">
    <div class="modal-dialog modal-lg" role="document" , style="width: 680px;height: 800px;">
        <div class="modal-content">
            <div class="modal-header" style="background: #428bca;color: #ffffff;text-align: center;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabelOne">新增或者更新</h4>
            </div>
            <div class="modal-body">
                <div class="from-group">
                    <label class="col-sm-4 control-label" , hidden>名称:</label>
                    <div class="col-sm-8 form-validate" style="margin-top:0px;" hidden>
                        <input type="text" id="id" class="form-control" name="id"/>
                    </div>
                </div>
                <div class="from-group">
                    <label class="col-sm-4 control-label">名称:</label>
                    <div class="col-sm-8 form-validate" style="margin-top:-15px;">
                        <input type="text" id="name" class="form-control" name="name"/>
                    </div>
                </div>
                <div class="from-group">
                    <label class="col-sm-4 control-label">地址:</label>
                    <div class="col-sm-8 form-validate">
                        <input type="text" id="address" class="form-control" name="address"/>
                    </div>
                </div>
                <div class="from-group">
                    <label class="col-sm-4 control-label">手机号:</label>
                    <div class="col-sm-8 form-validate">
                        <input type="text" class="form-control" id="phone" name="phone"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addResume()">确认</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
